<template>
	<view class="bg">
		<view class="content">
			<view v-for="item in dataInfo" :key="item.id">
				<view class="course" >
					<view class="text-right">
						<image class="image" :src="item.banner" mode="aspectFill"></image>
						<uni-tag class="course-label" text="标签" type="error" size="mini" />
					</view>
					<view class="course-brief">
						<view class="title pl8 line-clamp2">{{item.title}}{{item.title}}</view>
						<uni-section :title="item.price" titleColor="red" titleFontSize="18px">
							<template v-slot:right>
								<text class="fz08rem number">45人在学</text>
							</template>
						</uni-section>
					</view>
				</view>
				<view class="divider" ></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				form:{},
				loadData : {user:true},
				status:'more',
				dataInfo:[]
				
			}
		},
		onLoad(options){
			this.id = options.id
			this.onGetData()
		},
		methods: {
			onGetData(){
				let _this = this
				this.$request_api('applet_api/product','POST',this.form).then(res => {
					_this.dataInfo = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			onLink(url,id){
				console.log(url)
				uni.navigateTo({
					url: url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
// .bg{background-color: #F5F5F5;}
.column{display: grid;text-align: center;}
.column-image{width: 40px;}
.content{padding: 15px;background-color: #FFFFFF;}
.course{display: grid;grid-template-columns: 40% 60%;margin-top: 12px;height: 100px;}
.course-brief{background-color: #FFFFFF;height: 120px;}
.title{height: 50px;font-size: 1.1rem;font-weight: 600;margin-top: 5px;}
.price{margin-top: 12px;}
.image{height: 90px;border-radius: 5px;}
.course-label{position: relative;top: -26px;}
.number{color: #7c7c7c;}
</style>
